<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="home.69ec4fe5.min.css"  />
<style>
*{
	margin: 0px;
	padding: 0px;
}
body{
	padding: 30px;
}
.dd{
	width: 80px;
	height: 100px;
	background: blueviolet;
	position:relative;
}


.dd:before{
	content:"";
display:block; /*伪元素默认是行内元素，所以如果要设定宽高，这必须显性设置为block*/
 border-width: 0px 0px 20px 80px;
/*border-color:#fff  transparent #fff transparent; */
border-color:transparent transparent #ccc transparent; 
background:transparent;
border-style:solid; /*设置边框为固体的*/
width:0; /*设定新创建的元素*/

position:absolute; /*相对于父容器绝对定位，设置偏移父容器边框距离*/
bottom: 0;

}

.dd:hover {
	height: 140px;
	background: red;
    border-width: 0px 0px 20px 80px;
        transition: all .2s ease-in-out;
}
/*
.dd:hover .dd:after {
	background: red;
    border-width: 0px 0px 20px 80px;
}

*/

/*
 * media="screen"
@media only screen and (min-width: 1025px)
.an-aol:hover .man:after {
    right: 5px;
}
 * 
 * 
 media="screen"
@media only screen and (min-width: 1025px)
.an-aol .man:after {
    content: "";
    background: url(../images/projects/aol/man.png);
    width: 263px;
    height: 246px;
    position: absolute;
    top: 0;
    right: -75px;
    transition: right .8s;
}
 * */
</style>
	</head>
	<body>
		<div class="dd"></div>
		
		
		
	</body>
</html>
